<template>
    <!-- 收藏 -->
    <div class="star-item flex flex-ac">
        <div class="item-img">
            <el-image style="width: 100%; height: 100%" :src="item.img" fit="fill"></el-image>
        </div>
        <div class="star-detail">
            <div>
                名称：{{ item.name }}
            </div>
            <div>
                发布时间：{{ item.publish.time }}
            </div>
            <div>
                发布人：{{ item.publish.name }}
            </div>
            <div class="mt-15">
                <star-btn :star="item.star" :index="index" @starClick="starClick"></star-btn>
            </div>
        </div>
    </div>
</template>
  
<script>
import starBtn from './star-btn.vue';
export default {
    name: 'StarItem',
    components: { starBtn },
    props: {
        item: {
            type: Object,
            default: {}
        },
        index: {
            type: [Number, String],
            default: ''
        }
    },
    data() {
        return {

        }
    },
    methods: {
        starClick(star, index) {
            this.$emit('starClick', star, index)
        }
    }
}
</script>
  
<style scoped>
.star-item {
    padding: 20px 40px;
    border-bottom: 1px solid #9ABCED;
}

.item-img {
    width: 350px;
    height: 175px;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 20px;
}
</style>
  